<!-- 道士带条狗 -->
<script setup lang="ts">
import { getAd } from '@/api/getAxios';
import { ref } from 'vue'

const data = ref()

getAd().then((res) => {
    data.value = showData(res.data.result.gamelist, 1)
})
const showData = function (arr: any, count: number) {
    var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}
</script>
<template>
    <li class="add" v-if="data">
        <p><a :href="data[0].jump_url" target="_blank"><img :src="data[0].icon_url" alt=""></a></p>
        <p>{{ data[0].game_name }}</p>
    </li>
</template>

<style scoped lang='less'>
.add {
    justify-content: flex-start !important;
    transition: all 0.2s;
    animation: show 1s;

    @keyframes show {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    &:active {
        opacity: 0.8;
    }
}

p:nth-child(1) {
    position: relative;

    img {
        width: 100%;
    }

    &::after {
        content: "广告";
        display: block;
        position: absolute;
        right: 4px;
        top: 4px;
        color: black;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 2px 4px;
        border-radius: 4px;
        font-size: .75rem;
    }
}

p:nth-child(2) {
    margin-top: 8px;
    font-size: .85rem;
}
</style>